Exercice 2 : Box Model

2.1 Comprendre le Box Model

.box { width: 300px; padding: 20px; border: 5px solid #333; margin: 15px; }

1. Avec box-sizing: content-box, quelle est la largeur totale visible ?

Réponse : 300 + 40 + 10 = 350px

2. Avec box-sizing: border-box, quelle est la largeur totale visible ?

Réponse : 300px

3. Écrivez le reset CSS universel pour box-sizing :

* { box-sizing: border-box; }

2.2 Centrer un élément


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  width: 600px;
  margin: auto;
}